<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人博客</title>
    <style>
        /* 公共样式 */
html,body,h1,h2,h3,h4,h5,h6,div,ul,li,ol,a,p{
    margin: 0px;
    padding: 0px;
}
ul,ol{
    list-style: none;
}

a{
    text-decoration:none;
}
body{
    background: #80c7db url(./images/90304_top.jpg) no-repeat center -60px;
    font-family: PingFangSC-Regular;
}
.both{
    width: 100%;
    height: 10px;
    clear: both;
}

/* 页面头部 */
#header{
    width:1000px;
    height:102px;
    margin: 0px auto;
    padding-top: 50px;
}
#header h2{
    width:100%;
    height:36px;
    font-size: 22px;
    color: #333333;
    line-height: 36px;
    text-shadow: 1px 1px 2px #FFFFFF;
}
#header div{
    width:100%;
    height:22px;
    margin-top: 19px;
    font-size: 12px;
    color: #FFFFFF;
    line-height: 22px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.50);
}
/* 页面导航栏 */
#nav{
    width:1000px;
    height:40px;
    margin: 0px auto;
    border:1px solid red; /* 临时边框属性 */
}
ul li{
    width: 90px;
    height: 40px;
    line-height: 38px;
    font-size: 14px;
    float: left;
    text-shadow: 2px 2px 2px #FFFFFF;
    font-weight: 600;
    text-align: center;
}
li:hover{
    background: #EE6723;
    border-radius: 15px;
    color: #FFFFFF;
    text-shadow: 2px 2px 1px #333333;
}


/* 页面的主体 */
#main{
    width: 1000px;
    margin: 0px auto;
}
/* 文章标题 */
#main #text-title{
    width: 720px;
    height: 50px;
    line-height:45px;
    text-shadow: 2px 2px 2px #FFFFFF;
    font-weight: 600px;
    /* border: 1px solid turquoise; */
}
/* 星星图片 */
.start{
    width: 15px;
    height: 15px;
}
/* 标题日期 */
.date{
    font-size: 12px;
    letter-spacing: 0.5px;;
    float: right;
    text-shadow: 2px 2px 2px #FFFFFF;
    font-weight: 400;
}
/* 文章内容 */
#text-content{
    width:720px;
    height:164px;
    /* border: 1px solid yellowgreen; */
}
/* 文章图片 */
.png{
    width: 250px;
    height: 164px;
}
/* 文章文字 */
.text{
    width: 455px;
    height: 164px;
    float: right;
    font-size: 12px;
    color: #333333;
    line-height: 22px;;
}
/* 阅读链接 */
.read-1{
    width: 60px;
    height: 30px;
    font-size: 12px;
    color: #FFFFFF;
    letter-spacing: 0.5px;
    font-weight: 600;
    text-align: center;
    line-height: 28px;
    position: relative;
    top:-33px;
    left:660px;
    background-color: #EE6723;
    border-radius: 10px;
}
.read-2{
    width: 60px;
    height: 30px;
    font-size: 12px;
    color: #FFFFFF;
    letter-spacing: 0.5px;
    font-weight: 600;
    text-align: center;
    line-height: 28px;
    position: relative;
    top:-33px;
    left:660px;
    background-color: #EE6723;
    border-radius: 10px;
}
.read-3{
    width: 60px;
    height: 30px;
    font-size: 12px;
    color: #FFFFFF;
    letter-spacing: 0.5px;
    font-weight: 600;
    text-align: center;
    line-height: 28px;
    position: relative;
    top:-33px;
    left:660px;
    background-color: #EE6723;
    border-radius: 10px;
}


/* 博客侧边栏列表*/
#main .aside{
    width: 200px;
    float: right;
    overflow: hidden;
    height: 720px; /* 临时属性 */
    /* border:1px solid #fc0; 临时边框属性 */
}
.aside .aside-title{
    width: 200px;
    height: 42px;
    font-size: 14px;
    line-height: 40px;
    letter-spacing: 1.08px;
    font-weight: 600;
    color:#2F5711;
    /* border: 1px solid blue; */
}
.aside-title-content{
    width: 200px;
    height: 86px;
    font-size: 12px;
    text-shadow: 1px 1px 1px #FFFFFF;
    font-weight: 600;
    color: #FF6600;
    line-height: 22px;
    /* border:1px solid burlywood; */
}
.aside-title-text-1{
    width: 200px;
    height: 152px;
    font-size: 12px;
    line-height: 22px;
    letter-spacing:-0.3px;
    color: #FFFFFF;
    text-shadow: 1px 1px 1px rgba(0,102,204,0.50);
    font-weight: 600;;
    /* border: 1px solid blue; */
}
.aside-title-text-2{
    width: 200px;
    height: 86px;
    font-size: 12px;
    line-height: 25px;
    color: #FFFFFF;
    text-shadow: 1px 1px 1px rgba(0,102,204,0.50);
    font-weight: 600;;
    /* border: 1px solid blue; */
}

/* 博客文章列表*/
#main .article{
    width: 720px;
    float: left;
    background-color: #E5F3F7;
    border-radius: 10px;
    padding:0px 20px 20px 20px;
    height: 703px; /* 临时属性 */
}


/* 页脚样式 */
#footer {
    line-height: 50px;
    height: 50px;
    width: 100%;
    font-size: 12px;
    color: #333333;
    letter-spacing: 0.5px;
    text-align: center;
    font-weight: 400;;
    /* border:1px solid #f0c; 临时边框属性 */
}

    </style>
</head>
<body>
    <!-- 页面头部开始 -->
    <header id="header">
        <h2>陌上花开淡香随</h2>
        <div>如果没有为陌上悄然伫立并为陌上风情所陶醉的人，那么花开也寂寞,风情也苍白...</div>
    </header>
    <!-- 页面头部结束 -->
    <!-- 导航栏开始 -->
    <nav id="nav">
        <ul>
            <li>博客首页</li>
            <li>慢生活</li>
            <li>程序人生</li>
            <li>经典人生</li>
            <li>作品展示</li>
            <li>留言板</li>
        </ul>
    </nav>
    <!-- 导航栏结束 -->
    <div class="both"></div>
    <!-- 页面主体开始 -->
    <div id="main">

        <!-- 侧边栏开始 -->
        <aside class="aside">
            <!-- 博客分类 -->
            <div class="aside-title">博客分类</div>
            <div class="aside-title-content">
                <span>慢生活(3)</span><br>
                <span>程序人生(25)</span><br>
                <span>经典美文(39)</span>
            </div>
            <!-- 近期文章 -->
            <div class="aside-title">近期文章</div>
            <div class="aside-title-text-1">
                <p>女孩都有浪漫的小情怀</p>
                <p>也许下个路口就会遇见希望</p>
                <p>6月毕业季，祝福送给你</p>
                <p>生活常有缺席的-可搞笑从来不缺席</p>
                <p style=" white-space:nowrap;">为了一个不存在的梦，执念了那么多年</p>
                <p>妹妹，明天你就要嫁人啦</p>
            </div>
            <!-- 文章归档 -->
            <div class="aside-title">文章归档</div>
            <div class="aside-title-text-2">
                <p>2021年   三月</p>
                <p>2021年   四月</p>
                <p>2021年   六月</p>
            </div>
            <!-- 友情链接 -->
            <div class="aside-title">友情链接</div>
            <div class="aside-title-text-2">
                <p>个人博客</p>
                <p>百度</p>
                <p>Google</p>
            </div>

        </aside>
        <!-- 侧边栏结束 -->

        <!-- 博客文章列表 -->
        <article class="article">
            <!-- 文章标题1 -->
             <div id="text-title">
                <img class="start" src="./images/import.gif">
                <span class="title">女孩都有浪漫的小情怀</span>
                <span class="date">2021-5-20</span>
             </div>
             <!-- 文章内容1 -->
              <div id="text-content">
                <img class="png" src="./images/2011714152744924.jpg">
                <span class="text">
                    女孩子都有着浪漫的小情怀，对于求婚更是抱着满满的浪漫期待，也希望在求婚那一天对方可以给自己一个最浪漫的求婚词。<br>
                    you are the apple of my eyes.<br>
                    你是我这辈子最珍贵的人。请让我永远守护在你身边，我一定将你当成掌心的珍宝，一辈子悉心呵护。你，愿意嫁给我吗？
                </span>
                <div class="read-1">阅读>></div>
              </div>

              <!-- 文章标题2 -->
             <div id="text-title">
                <img class="start" src="./images/import.gif">
                <span class="title">也许下个路口就会遇见希望</span>
                <span class="date">2021-5-20</span>
             </div>
             <!-- 文章内容2 -->
              <div id="text-content">
                <img class="png" src="./images/2011713203720633.jpg">
                <span class="text">
                    爱和恨，从来就没有单独存在过，一直是一起存在的，只不过是某个阶段中，爱比恨多了一点儿，所以看见了爱，模糊了恨；或者恨比爱多了一点儿，所以看见了恨，模糊了爱，而我们，就都在这些被模糊了情感中，最终模糊了自己。<br>
                    如果世上不存在对等的爱，那就让我爱多一些吧。<br>
                    想你的时候，把你的名字写在手心，摊开是想念，握紧是幸福。幸福就是简简单单的依靠，就是手牵手的温柔。
                </span>
                <div class="read-2">阅读>></div>
              </div>

              <!-- 文章标题3 -->
             <div id="text-title">
                <img class="start" src="./images/import.gif">
                <span class="title">6月毕业季，祝福送给你</span>
                <span class="date">2021-5-20</span>
             </div>
             <!-- 文章内容3 -->
              <div id="text-content">
                <img class="png" src="./images/2011713195450617.jpg">
                <span class="text">
                    一天天的相聚如在眼前，一夜夜的奋斗有你陪伴，一次次的欢笑你我共享，一回回的困难你帮我解决。一千多个日夜，你我的情谊深厚弥坚。离别的汽笛已经鸣响，分别就在这迷人的六月。愿你别后宏图大展，梦想实现，我们将重逢在美好的明天！<br>
                    知识的浪潮依然在我们脑海涌动，昂扬的斗志依然在我们的世界驻扎，相知的情意依然在我们的心田飘荡，离别的号角却已在我们的耳边奏响...
                </span>
                <div class="read-3">阅读>></div>
              </div>
        </article>
    </div>
    <!-- 页面主体结束 -->
    <div class="both"></div>
    <!-- 页面页脚开始 -->
    <footer id="footer">
        米桑首抄，再抄必究！
    </footer>
    <!-- 页面页脚结束 -->
</body>
</html>